<template>
  <div class="data-download-save">
    <el-button v-if="showDownloadBtn" class="download-btn" type="primary" size="mini" @on-click="download">
      <i class="iconfont icon-download"></i>
    </el-button>
    <div class="save-btn">
      <el-popover
        ref="popover"
        popper-class="save-form"
        width="240"
        @hide="reset('ruleForm')"
        v-model="showPopup">
        <div class="showPopupDiv">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px">
            <el-form-item label="名称:" prop="pageHeaderName">
              <el-input size="mini" v-model="ruleForm.pageHeaderName"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="showPopupDiv">
          <span>是否置顶</span>：
          <el-radio v-model="isTop" label="yes">是</el-radio>
          <el-radio v-model="isTop" label="no">否</el-radio>
        </div>
        <div class="btns">
          <el-button size="mini" @click="reset('ruleForm')">取消</el-button>
          <el-button :disabled="active" type="success" size="mini" @click="sure('ruleForm')">确定</el-button>
        </div>
      </el-popover>
      <el-button class="save" v-popover:popover size="mini" type="success">保存</el-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Msg from '../../../../assets/js/msg'

  export default {
    name: 'data-download-save',
    props: {
      // 是否显示下载按钮，默认false，不显示
      showDownloadBtn: {
        type: Boolean,
        default: true
      },
      // 需下载的数据
      dataMsg: Array
    },
    watch: {
      isDisabled (val) {
        this.active = val
      }
    },
    data () {
      return {
        showPopup: false,
        ruleForm: {
          pageHeaderName: ''
        },
        rules: {
          pageHeaderName: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
          ]
        },
        isTop: 'yes',
        active: false
      }
    },
    methods: {
      download () {
        if (this.dataMsg.length === 0) {
          Msg.alert('暂无下载数据！')
          return false
        }
        this.JSONToCSVConvertor(this.dataMsg, true)
      },
      reset (formName) {
        this.showPopup = false
        this.$refs[formName].resetFields()
        this.isTop = 'yes'
      },
      sure (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let dataValue = {
              pageHeaderName: this.ruleForm.pageHeaderName,
              isTop: this.isTop
            }
            this.$emit('on-save', dataValue)
            this.$refs[formName].resetFields()
            this.showPopup = false
          } else {
            return false
          }
        })
      },
      JSONToCSVConvertor (JSONData, ShowLabel) {
        let fileName = this.fileName
        let arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData
        let CSV = ''
        if (ShowLabel) {
          let row = ''
          for (let index in arrData[0]) {
            row += index + ','
          }
          row = row.slice(0, -1)
          CSV += row + '\r\n'
        }
        for (let i = 0; i < arrData.length; i++) {
          let row = ''
          for (let index in arrData[i]) {
            let arrValue = arrData[i][index] == null ? '' : '="' + arrData[i][index] + '"'
            row += arrValue + ','
          }
          row.slice(0, row.length - 1)
          CSV += row + '\r\n'
        }
        if (CSV === '') {
          Msg.alert('无效数据！')
          return
        }
        if (this.msieversion()) {
          let IEwindow = window.open()
          IEwindow.document.write('sep=,\r\n' + CSV)
          IEwindow.document.close()
          IEwindow.document.execCommand('SaveAs', true, fileName + '.csv')
          IEwindow.close()
        } else {
          let uri = 'data:application/csv;charset=utf-8,\uFEFF' + encodeURI(CSV)
          let link = document.createElement('a')
          link.href = uri
          link.style = 'visibility:hidden'
          link.download = fileName + '.csv'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      },
      msieversion () {
        let ua = window.navigator.userAgent
        let msie = ua.indexOf('MSIE ')
        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11\./)) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .data-download-save
    display inline-block
    .download-btn
      padding 7px 7px
      margin-right 7px
      .icon-download
        font-size 12px
    .save-btn
      display inline-block
  .save-form
    .btns
      text-align right
      margin-top 15px
</style>
